<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <style type="text/css">
        #big{
            width: 500px;
            height: 300px;
            border: 1px solid gray;
        }
        #small{
            width: 200px;
            height: 100px;
            border: 2px solid gray;
            background-color: aqua;
        }
        .one{
            -webkit-transform: translate(10px);
            -moz-transform: translate(10px);
            -ms-transform: translate(10px);
            -o-transform: translate(10px);
            transform: translate(10px);
        }
        .two{
            -webkit-transform: translate(20px);
            -moz-transform: translate(20px);
            -ms-transform: translate(20px);
            -o-transform: translate(20px);
            transform: translate(20px); 
        }
        .three{
            -webkit-transform: translate(20px, 10px);
            -moz-transform: translate(20px, 10px);
            -ms-transform: translate(20px, 10px);
            -o-transform: translate(20px, 10px);
            transform: translate(20px, 10px);   
        }
        .four{
            -webkit-transform: translate(20px, 20px);
            -moz-transform: translate(20px, 20px);
            -ms-transform: translate(20px, 20px);
            -o-transform: translate(20px, 20px);
            transform: translate(20px, 20px);   
        }
        .five{
            -webkit-transform: translate(50px, 50px);
            -moz-transform: translate(50px, 50px);
            -ms-transform: translate(50px, 50px);
            -o-transform: translate(50px, 50px);
            transform: translate(50px, 50px); 
        }
        .six{
            -webkit-transform: translate(100px, 100px);
            -moz-transform: translate(100px, 100px);
            -ms-transform: translate(100px, 100px);
            -o-transform: translate(100px, 100px);
            transform: translate(100px, 100px); 
        }
        .seven{
            -webkit-transform: translate(-25px,-25px);
            -moz-transform: translate(-25px,-25px);
            -ms-transform: translate(-25px,-25px);
            -o-transform: translate(-25px,-25px);
            transform: translate(-25px,-25px);
        }
        .eight{
            -webkit-transform: translate(0px);
            -moz-transform: translate(0px);
            -ms-transform: translate(0px);
            -o-transform: translate(0px);
            transform: translate(0px);
        }
    </style>
</head>
<body>
    <form action="#" method="post" >
    <input type="radio" value="translate(10px)" name="translate" id="one"/>
    <label for="one">translate(10px)</label><br/>
    <input type="radio" value="translate(20px)" name="translate" id="two"/>
    <label for="two">translate(20px)</label><br/>
    <input type="radio" value="translate(20px,10px)" name="translate" id="three"/>
    <label for="three">translate(20px,10px)</label><br/>
    <input type="radio" value="translate(20px,20px)" name="translate" id="four"/>
    <label for="four">translate(20px,20px)</label><br/>
    <input type="radio" value="translate(50px,50px)" name="translate" id="five"/>
    <label for="five">translate(50px,50px)</label><br/>
    <input type="radio" value="translate(100px,100px)" name="translate" id="six"/>
    <label for="six">translate(100px,100px)</label><br/>
    <input type="radio" value="translate(-25px,-25px)" name="translate" id="seven"/>
    <label for="seven">translate(-25px,-25px)</label><br/>
    <input type="radio" value="none" name="translate" id="eight"/>
    <label for="eight">none</label><br/>
    </form>
    <div id="big">
        <div id="small">

        </div>
    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $("input").click(function () {
            $("#small").removeClass();
            var inp=$(this).attr("id");
            $("#small").addClass(inp);
        });
    });

</script>
</body>
</html>